
<template>
  <div class="listInfoRoot">
    <div class="left">
      <img :src="detail.coverImgUrl" alt="">
    </div>
    <div class="right">
      <div class="title">
        <div class="titleTag">歌单</div>
        <div class="titleContent  txtover">{{detail.name}}</div>
      </div>
      <div class="user">
        <img class='userAvatar' :src="detail.creator.avatarUrl" alt="">
        <span class="userName">{{detail.creator.nickname}}</span>
        <span class="createTime">
          {{detail.createTime}}创建
        </span>
      </div>
      <div class="btns">
        <div class="btnItem playAll" @click="playAll">
          <i class="iconfont icon-bofang "></i>播放全部
        </div>
        <div class="btnItem">
          <i class="iconfont  icon-xihuan"></i>收藏
        </div>
        <div class="btnItem ">
          <i class="iconfont icon-zhuanfa"></i>分享
        </div>
      </div>
      <div class="tags">
        分类： <span class="tagItem" v-for="(v,i) in detail.tags" :key="i">{{v}}</span>
      </div>
      <div class="otherInfo flex">
        <span class="mscNum">
          歌曲：{{detail.trackCount}}
        </span>
        <span class="playCount">播放：{{detail.playCount}}</span>
      </div>
      <div class="desc txtover">简介：{{detail.description}}</div>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'listInfo',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  setup(p) {
    const store = useStore()
    const playAll = () => {
      store.commit('updateMusicList', {
        musicList: p.detail.tracks,
        musicListId: p.detail.id
      })
      store.commit('updateMusicId', p.detail.tracks[0].id)
    }
    return {
      playAll
    }
  }
}
</script>

<style scoped>
.listInfoRoot {
  display: flex;
  padding: 20px 15px;
  width: 100%;
}
.left {
  width: 170px;
}
.left img {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  overflow: hidden;
}
.right {
  width: calc(100% - 170px);
  font-size: 12px;
}
.title,
.tags,
.btns,
.user {
  display: flex;
  align-items: center;
}
.tags {
  margin-bottom: 8px;
}
.tagItem {
  color: var(--blue);
  margin-right: 5px;
}
.titleTag {
  margin-right: 5px;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 1px 2px;
}
.titleContent {
  width: 80%;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}
.user {
  margin-top: 8px;
}
.userAvatar {
  height: 25px;
  width: 25px;
  margin-right: 8px;
  border-radius: 50%;
}
.userAvatar img {
  width: 100%;
  border-radius: 50%;
}
.userName {
  color: var(--blue);
  margin-right: 8px;
}
.btns {
  margin: 8px 0;
}
.btnItem {
  padding: 8px 15px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
}
.btnItem i {
  font-size: 12px;
  margin-right: 3px;
}
.playAll {
  background-color: var(--red);
  color: #fff;
}
.mscNum {
  margin-right: 13px;
}
.desc {
  margin: 5px 0;
}
</style>